<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-10-14 09:13:56
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-11-05 17:13:42
 * @FilePath: \BLOG\src\views\home\components\MyLabels.vue
-->
<template>
  <div class="label-wrap" :style="{ paddingBottom: state.labelList.length ? '20px' : '0px' }">
    <div class="slider-title">
      🔖 我的标签
      <div class="mac-style"></div>
    </div>
    <div class="label-item-inner">
      <LabelCloud
        v-if="state.labelList.length > 0"
        :tags="state.labelList"
        :width="isMobi ? '350' : '300'"
        :height="isMobi ? '350' : '300'"
        :radius="isMobi ? '140' : '120'"
        @tagClick="v => hanldeLable(v)">
        <template #default="{ item }">
          <div class="my-label-item pointer hover-shadow" :style="{ border: '1px solid ' + item.color }">
            <span class="icon-wrap">
              <IconLabel :size="'14px'" />
            </span>
            <span class="lable" :style="{ 'background-color': item.color }">{{ item.text }}</span>
          </div>
        </template>
      </LabelCloud>
      <div class="m-no-label" style="width: 100%; height: 100%; padding: 15px" v-else>
        <Empty :text="'暂无标签，快去添加吧~'" :loadingText="'标签正在加载中...'" :loading="state.loableLoading" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getDict } from '@/api/common';
import { getRandomColor } from '@/utils/theme';
import { useRouter } from 'vue-router';
import { reactive } from 'vue';
import useResize from '@/hooks/useResize';
import LabelCloud from '@/components/labelCloud/index.vue';

const router = useRouter();
const { isMobi } = useResize();

const state = reactive({
  labelList: [],
  loableLoading: false
});

// 获取我的标签
const getDictFn = async () => {
  try {
    state.loableLoading = true;
    const res = await getDict({ dictType: 'blog_label' });
    if (res.code === 200) {
      state.labelList = res.data.map((item: any) => {
        return {
          name: item.label,
          label: item.label,
          color: getRandomColor()
        };
      });
    }
  } catch (error) {
  } finally {
    state.loableLoading = false;
  }
};
getDictFn();

// 点击我的标签  跳转到分类列表
const hanldeLable = (item: any) => {
  router.push({
    path: '/article/category',
    query: {
      type: 4,
      category: item.label
    }
  });
};
</script>

<style lang="scss" scoped>
.label-wrap {
  margin-top: 20px;
  background-image: linear-gradient(#ffffff00, #e3f4f5 20%, #b3e7a3 100%);
  padding-bottom: 20px;
  .label-item-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .lebel-content-wrap {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
  }
  .my-label-item {
    margin: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    border-radius: var(--border-radius-3);
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    .icon-wrap,
    .lable {
      height: 100%;
      display: inline-block;
    }
    .icon-wrap {
      padding: 4px 6px 4px 8px;
      background-color: transparent;
      border-right: 1px solid var(--border-color) !important;
      border-top-left-radius: var(--border-radius-3);
      border-bottom-left-radius: var(--border-radius-3);
    }
    .lable {
      color: #fff;
      padding: 4px 6px 4px 10px !important;
      font-size: 15px;
      line-height: 15px;
    }
    &:hover {
      transform: scale(1.2);
    }
  }
}
</style>
